<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				height: 5000px;
				background: linear-gradient(#fff, #000);
				transition: all .8s ease-in-out;
			}
			
			.rocket {
				display: none;
				position: fixed;
				width: 149px;
				height: 249px;
				background: url(img/rocket.png) left top;
				top: 60%;
				right: 20px;
				/*animation: run steps(5) .8s;*/
				animation-fill-mode: forwards;
			}
			
			@keyframes run {
				0% {
					background-position: -100% top;
				}
				100% {
					background-position: -500% top;
				}
			}
			
			.rocket:hover {
				background-position: -100% top;
			}
		</style>

	</head>

	<body>
		<div class="rocket"></div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rocket = $(".rocket"),
				is_run = false;

			$(window).on("scroll", scrollchange)

			function scrollchange() {

				var scrollTop = $(window).scrollTop();
				if(scrollTop >= 200) {
					rocket.css("display", "block");
				} else {
					rocket.css("display", "none");
				}
			}

			rocket.on("click", function() {

				$(window).off("scroll", scrollchange);
				if(!is_run) {
					is_run = true;
					var ST_before =  $(window).scrollTop(),
						body_speed, rocket_speed,
						rocket_top_before = rocket.position().top;
					body_speed = ST_before / 50;
					rocket_speed = rocket_top_before / 5000	;
					timer = setInterval(function() {

						var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
						rocket_top = rocket.position().top;
						if(rocket_top / rocket_top_before >= 0.20) {
							rocket_speed += 1;
							body_speed += 1;
						} else if(rocket_top / rocket_top_before <= 0.08) {
							rocket_speed += 10;
							body_speed += 10;

						} else {
							rocket_speed = 10;
							body_speed = 10;
						}
						document.documentElement.scrollTop = document.body.scrollTop = scrollTop - body_speed;

						rocket_top -= rocket_speed;

						rocket.css("top", rocket_top + "px");
						console.log(rocket_top)
						
						if(scrollTop <= 0) {
							clearInterval(timer);
							rocket.css("top", "");
						}
					}, 20)
					rocket.css("animation", "run steps(5) 1s");
					rocket.on("animationend", function() {
						rocket.css("animation", "");
						is_run = false;
					})
				}

			})
		</script>
	</body>

</html>